<!--生产信息-按序-->
<template>
  <card-wrapper :data-item="dataItem" class="w-288">
    <template #header>
      <p class="ml-8 font-12 num-wrapper">
        <span class="text-5A6F82">{{ $i18n.t("mind.nameProcess") }}</span>
        <span
          class="ml-4 color-F26A60"
          v-if="dataItem.searchResults && dataItem.searchResults.length > 0"
          >{{ dataItem.searchResults.length }}</span
        >
      </p>
    </template>
    <div class="dataList new-custom-scrollbar" @wheel.stop>
      <div
        v-for="(item, index) in dataItem.searchResults"
        :key="index"
        class="flex flex-col p-8 bg-EBF0F5 font-14 color-333333 radius-4 hover:bg-DBEAFF"
        :class="{ 'mt-8': index > 0 }"
      >
        <div class="flex">
          <strong
            >{{ item["顺序"] ? item["顺序"] + "-" : ""
            }}{{ item["工序"] }}</strong
          >
          <div
            class="flex-shrink-0 abnormal-tag"
            v-if="item['是否异常'] !== '否'"
          >
            {{ $i18n.t("mind.abnormal") }}
          </div>
        </div>
        <label-normal
          :label="$i18n.t('mind.reporter')"
          :value="`${item['报工人'] || '无'}`"
          class="mt-8"
        />
        <p class="mt-4">{{ item["报工日期"].split("~")[0] || "无" }}~</p>
        <p class="mt-4">{{ item["报工日期"].split("~")[1] || "无" }}</p>
      </div>
    </div>
  </card-wrapper>
</template>

<script>
import CardWrapper from "@/views/mind/components/common/card-wrapper.vue";
import AreaTop from "@/views/mind/components/common/area-top.vue";
import LabelNormal from "@/views/mind/components/common/label-normal.vue";
export default {
  name: "card-production-in-order",
  props: {
    dataItem: {
      type: Object,
      default: () => {},
    },
  },
  components: { CardWrapper, AreaTop, LabelNormal },
};
</script>
<style lang="scss" scoped>
.num-wrapper {
  background: #ebf0f5;
  border-radius: 2px 2px 0 0;
  padding: 2px 4px;
}
.dataList {
  max-height: 324px;
  padding: 0 16px;
  overflow-y: auto;
}
.abnormal-tag {
  height: 22px;
  font-size: 12px;
  color: #fff;
  line-height: 22px;
  padding: 0 4px;
  background-color: #fe9f00;
  border-radius: 2px;
  margin-left: 8px;
}
</style>
